<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .multi-tables {
            display: flex;
            flex-direction: column;
            /* border: 1px solid #ccc; */
        }

        .multi-row {
            display: flex;
            border-left: 1px solid #ccc;
        }

        .multi-col {
            width: 80px;
            padding: 2px 6px;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }

        .multi-col:last-child {
            border-top: 1px solid #ccc;
        }
</style>
<body>
 <script>
   document.write('<div class="multi-tables">');
    for (var row = 1; row <= 9; row++) {
      document.write('<div class="multi-row">');
      for (var i = 1; i <= row; i++) {
        document.write('<span class="multi-col">' + row + ' x ' + i + ' = ' + row * i + '</span>');
      }
      document.write('</div>');
    }
    document.write('</div>');
 </script> 
</body>
</html>